<template>
  <Card title="活动列表">
    <Card :bordered="false">
      <Input v-model="queryAdminCuVenuesBO.cuVenuesTitle" placeholder="请输入标题关键字查询" style="width: 15vw"></Input>
      <Button type="primary" @click="query" style="margin-left: 15px">查询</Button>
    </Card>
    <Table border stripe ref="selection" size="small" :columns="columns" :data="nowData">
      <template slot-scope="{ row, index }" slot="action">
        <Button  @click="showList(row)">查看报名人员</Button>
        <Button type="primary" size="small" style="margin-right: 5px" @click="show(row)">查看</Button>
        <Button type="error" size="small" @click="remove(row)">删除</Button>
        <Modal
          v-model="modal1"
          title="提示"
          @on-ok="okDel"
          @on-cancel="cancel">
          <p>确定要删除此信息吗?删除后将不能恢复</p>
        </Modal>
      </template>
    </Table>
    <Page :total="dataCount" :page-size="queryAdminCuVenuesBO.size" @on-change="changePage" @on-page-size-change="_nowPageSize"
          show-total show-sizer show-elevator/>
    <Modal  title="查看内容" v-model="visible" class-name="fl-image-modal">
      <Table border stripe ref="selection" size="small" :columns="columnsTwo" :data="nowDataTwo"></Table>
    </Modal>
  </Card>
</template>

<script>
export default {
  name: 'venues-list',
  data () {
    return {
      columnsTwo:[
        {
          title: '序号',
          key: 'cuUserId'
        },
        {
          title: '昵称',
          key: 'cuUsername'
        },{
          title: '参加日期',
          key: 'cuVenuesCreateDate'
        },
      ],
      nowDataTwo:[],
      modal1: false,
      delRow: {},
      queryAdminCuVenuesBO: {
        size: 10,
        current: 1,
        cuVenuesTitle: '',
        cuVenuesIs: null

      },
      visible:false,
      dataCount: 0,
      columns: [
        {
          title: '序号',
          key: 'cuUserId'
        },
        {
          title: '标题',
          key: 'cuVenuesTitle'
        }, {
          title: '电话',
          key: 'cuVenuesPhone'
        }, {
          title: '地址',
          key: 'cuVenuesAddress'
        }, {
          title: '是否可预约',
          key: 'cuVenuesIs',
          render: (h, params) => {
            let gender = params.row.cuVenuesIs
            if (gender == 0) {
              gender = '是'
            } else if (gender == 1) {
              gender = '否'
            }
            return h('span', gender)
          },
          filters: [
            {
              label: '是',
              value: 0
            },
            {
              label: '否',
              value: 1
            }
          ],
          filterMultiple: false,
          filterMethod (value, row) {
            if (value == 0) {
              return row.cuVenuesIs < 1
            } else {
              return row.cuVenuesIs > 0
            }
          }
        },

        {
          title: '是否已经被预约',
          key: 'cuVenuesAlreadyIs',
          render: (h, params) => {
            let gender = params.row.cuVenuesAlreadyIs
            if (gender == 0) {
              gender = '是'
            } else if (gender == 1) {
              gender = '否'
            }
            return h('span', gender)
          },
          filters: [
            {
              label: '是',
              value: 0
            },
            {
              label: '否',
              value: 1
            }
          ],
          filterMultiple: false,
          filterMethod (value, row) {
            if (value == 0) {
              return row.cuVenuesAlreadyIs < 1
            } else {
              return row.cuVenuesAlreadyIs > 0
            }
          }
        },
        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center'
        }

      ],
      nowData: []

    }
  },
  methods: {
    showList(row){
      this.visible = true;
      this.$axios_supermall.post("/cu-venues-user/queryVenuesUser",row.cuVenuesId).then(resp =>{
        if (resp.data.code == 0){
          this.nowDataTwo = resp.data.data;
        }
      });
    },
    query () {
      this.$Loading.start()
      this.$axios_supermall.post('/cu-venues/queryPages', this.queryAdminCuVenuesBO).then(resp => {
        if (resp.data.code == 0) {
          let data = resp.data.data
          this.nowData = data.records
          this.dataCount = data.total
        }
        this.$Loading.finish()
      }).catch(() => {
        this.$Loading.error()
      })
    },
    _nowPageSize (index) {
      // 实时获取当前需要显示的条数
      this.queryAdminCuVenuesBO.size = index
    },
    changePage (index) {
      this.queryAdminCuVenuesBO.current = index
      this.query()
    },
    cancel () {
      this.$Message.info('取消删除')
    },
    okDel () {
      this.$axios_supermall.post('/cu-venues/deleteId', this.delRow.cuVenuesId).then(resp => {
        if (resp.data.code == 0) {
          this.$Message.info('删除成功')
          this.query()
        } else {
          this.$Message.info(resp.data.msg)
        }
      })
    },
    show (row) {
      this.$router.push('/venues_t/venues_add/' + row.cuVenuesId)
    },
    remove (row) {
      this.delRow = row
      this.modal1 = true
    }
  },
  mounted () {
    this.query()
  }
}
</script>

<style scoped>

</style>
